<script setup lang="ts">
import { sleep } from 'sard-uniapp'
import { Toast } from '@/utils/toast'

const loading = ref(false)
function handleClick() {
  loading.value = true
  Toast.loading('加载中')
  setTimeout(() => {
    loading.value = false
    Toast.hide()
  }, 1500)
}

async function handleRefresh() {
  loading.value = true
  await sleep(1500)
  loading.value = false
}

onReachBottom(() => {
  Toast.info('已到底部')
})
</script>

<template>
  <PageWrapper :tabbar="true" :navbar="null" :loading="loading" @refresh="handleRefresh">
    <view class="pt-safe" />
    <!-- 头部欢迎区 -->
    <view class="home-header">
      <image class="avatar" src="https://via.placeholder.com/64" />
      <view class="welcome">
        Hi，欢迎回来！
      </view>
    </view>
    <!-- 快捷功能区 -->
    <sar-grid clickable>
      <sar-grid-item icon="star" text="功能一" />
      <sar-grid-item icon="star" text="功能二" />
      <sar-grid-item icon="star" text="功能三" />
    </sar-grid>
    <!-- 动态区 -->
    <view class="section-title">
      最新动态
    </view>
    <sar-list>
      <sar-list-item title="动态1" description="这里是动态内容" />
      <sar-list-item title="动态2" description="这里是动态内容" />
    </sar-list>
    <!-- 原有按钮演示区 -->
    <view class="demo-btns">
      <sar-button inline type="default" @click="handleClick">
        默认
      </sar-button>
      <sar-button type="pale">
        淡颜色
      </sar-button>
      <sar-button type="mild">
        温和
      </sar-button>
      <sar-button type="outline">
        轮廓线
      </sar-button>
      <sar-button type="text">
        文本
      </sar-button>
      <sar-button type="pale-text">
        淡文本
      </sar-button>
      <Capsule />
    </view>
  </PageWrapper>
</template>

<style scoped lang="scss">
.home-header {
  display: flex;
  align-items: center;
  padding: 24rpx 0 16rpx 0;
  .avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  .welcome {
    font-size: 18px;
    font-weight: bold;
  }
}
.section-title {
  margin: 24rpx 0 8rpx 0;
  font-size: 16px;
  font-weight: 500;
}
.demo-btns {
  margin-top: 32rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  align-items: center;
}
</style>
